<template>
  <model-dialog
    :visible.sync="payShow"
    :title="title"
    width="1000px"
    :show-close="false"
    @close="handlePayClose"
  >
    <template>
      <div class="pay-container">
        <div class="pay-header">
          <div class="pay-header-item">
            交易创建时间：{{ orderHeader.orderDate | formatDate('yyyy-MM-dd hh:mm:ss') }}
          </div>
          <div class="pay-header-item">
            交易订单：{{ orderHeader.id }}
          </div>
          <div class="pay-header-item">
            购买物品：{{ orderHeader.orderName }}
          </div>
        </div>
        <div class="pay-main-container">
          <div class="qrcode-container">
            <div
              id="payQrcode"
              ref="payQrcode"
              v-loading="qrcodeLoading"
              element-loading-text="支付码生成中..."
            />
          </div>
          <div class="pay-main-wrap">
            <div class="money-container">
              支付金额：<span class="unit">￥</span><span class="money">{{ orderHeader.grandTotal }}</span>
            </div>
            <div class="count-down-container">
              <el-statistic
                ref="statistic"
                format="HH:mm:ss"
                :value="orderHeader.closedTime"
                title="距离支付结束剩余:"
                time-indices
                @finish="handleHilarity"
              />
            </div>
            <div class="payMethod-container">
              <el-button :type="payMethod==='zfb'?'primary':''" round @click="changePay('zfb')">
                <svg-icon icon-class="payMethod-zfb" />
                支付宝
              </el-button>
              <el-button :type="payMethod==='wx_v3'?'primary':''" round @click="changePay('wx_v3')">
                <svg-icon icon-class="payMethod-wx" />
                微信
              </el-button>

            </div>
          </div>
        </div>
        <div class="pay-footer">
          温馨提示：在进行缴费或充值前，请务必确认您的缴费信息准确无误，避免因账号错误导致缴费失败或资金损失，如有疑问请联系客服。支付即同意《充值服务协议》
        </div>

      </div>
    </template>
  </model-dialog>

</template>
<script>
import QRCode from 'qrcodejs2'
export default {
  props: {
    title: {
      type: String,
      default: '订单支付'
    }
  },
  data() {
    return {
      payShow: false,
      orderId: null,
      orderHeader: {},
      payMethod: 'zfb',
      qrcodeLoading: false,
      orderStatusInterval: null
    }
  },

  created() {

  },
  mounted() {
  },
  destroyed() {
    if (this.orderStatusInterval) {
      clearInterval(this.orderStatusInterval)
    }
  },
  methods: {
    init(orderId) {
      this.payShow = true
      this.orderId = orderId
      this.payMethod = 'zfb'
      this.qrcodeLoading = false
      this.fetchOrder()
      this.fetchPayQrCode()
    },
    fetchOrder() {
      this.$store.dispatch('businessOrderHeaderGetById', this.orderId).then((res) => {
        this.orderHeader = res
      }).catch((_) => {})
    },
    fetchPayQrCode() {
      console.log(this.$store)

      this.qrcodeLoading = true
      this.$store.dispatch('generatePayQrCode', {
        loading: false,
        orderNo: this.orderId,
        payMethod: this.payMethod
      }).then((res) => {
        this.qrcodeLoading = false
        this.$nextTick(() => {
          document.getElementById('payQrcode').innerHTML = ''
          new QRCode(this.$refs.payQrcode, {
            text: res,
            width: 147,
            height: 147,
            colorDark: '#333333', // 二维码颜色
            colorLight: '#ffffff', // 二维码背景色
            correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
          })
        })
        if (this.orderStatusInterval) {
          clearInterval(this.orderStatusInterval)
        }
        this.orderStatusInterval = setInterval(() => {
          this.orderStatusByOrderId()
        }, 2000)
      }).catch((_) => {
        this.qrcodeLoading = false
      })
    },
    changePay(pay) {
      this.payMethod = pay
      this.fetchPayQrCode()
    },
    orderStatusByOrderId() {
      this.$store.dispatch('orderStatusByOrderId', { orderId: this.orderId, loading: false }).then((res) => {
        if (res.status === 2) {
          if (this.orderStatusInterval) {
            clearInterval(this.orderStatusInterval)
          }
          this.payShow = false
          this.$modal.msgSuccess('支付成功!')
          this.$emit('payNotify', true)
        } else if (res.status === 3) {
          if (this.orderStatusInterval) {
            clearInterval(this.orderStatusInterval)
          }
          this.payShow = false
          this.$modal.msgError('订单超时，自动关闭!')
          this.$emit('payNotify', false)
        }
      }).catch((_) => {})
    },
    handlePayClose() {
      this.payShow = false
      this.clearInterval()
    },
    clearInterval() {
      if (this.orderStatusInterval) {
        clearInterval(this.orderStatusInterval)
      }
    },
    handleHilarity() {
    }
  }
}
</script>
  <style lang="scss" scoped>
  ::v-deep .el-dialog .el-dialog__body{
    padding: 0px !important;
    margin: 0px !important;
  }
  ::v-deep .el-dialog .el-dialog__body::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
  .pay-container{
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    height: 100%;
    .pay-header{
      display: flex;
      flex-direction: row;
      height: 50px;
      line-height: 50px;
      background-color: #fcfcfc;
      border-top: 1px solid #e6e6e6;
      border-bottom: 1px solid #e6e6e6;
      border-left: 3px solid var(--color-primary);
      .pay-header-item{
        flex: 1;
      }
    }
    .pay-main-container{
      border: 1px dashed #d5d5d5;
      margin: 25px;
      border-radius: 8px;
      padding: 71px 182px;
      display: flex;
      flex-direction: row;
      .qrcode-container{
        height: 200px;
        #payQrcode{
          width: 197px;
          height: 197px;
          margin: 0 auto;
          border: 1px solid #e9e9e9;
          padding: 25px;
          border-radius: 5px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
      }
      .pay-main-wrap{
        margin-left: 35px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-align: left;
        .money-container{
          margin-bottom: 10px;
          span{
            font-weight: bolder;
            color: #f65160;
          }
          .unit{
            font-size: 20px;
          }
          .money{
            font-size: 25px;
          }
        }
        .count-down-container{
          ::v-deep .el-statistic{
            display: flex;
            flex-direction: row;
            align-items: baseline;
          }
        }
      }
      .payMethod-container{
        margin-top: 40px;
        margin-bottom: 10px;
        .el-button{
          width: 110px;
        }
        svg{
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
      }

    }
    .pay-footer{
      font-size: 14px;
      color: #a6a0a0;
      line-height: 25px;
      margin: 35px 45px;
      text-align: left;
    }
  }
  </style>
